.box {
  width: 100vw;
  height: 100vh;
  background-image: url("https://bullet001.oss-cn-shanghai.aliyuncs.com/file/payManager4a938fc5-a843-4e56-b12d-2502f129694f.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  overflow: hidden;
}
.box1 {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: radial-gradient(
    96% 111% at 50% 70%,
    rgba(0, 230, 255, 0.06) 8%,
    rgba(0, 227, 252, 0.06) 27%,
    #47f3ff 100%
  );
}
.img-box {
  position: absolute;
  width: 1024rpx;
  height: 840rpx;
  left: 50%;
  transform: translateX(-50%);
  top: 40vw;
}
.title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 614rpx;
  height: 285rpx;
  top: -100rpx;
  z-index: 12;
}
.img-1 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  z-index: 11;
}
.img-2 {
  width: 166rpx;
  height: 232rpx;
  position: absolute;
  left: 230rpx;
  top: 300rpx;
  z-index: 13;
  animation: jump linear 0.5s infinite alternate;
}
.img-3 {
  width: 144rpx;
  height: 135rpx;
  position: absolute;
  right: 325rpx;
  top: 228rpx;
  z-index: 13;
  animation: scale linear 0.5s infinite alternate;
}
.img-4 {
  width: 180rpx;
  height: 215rpx;
  position: absolute;
  right: 240rpx;
  top: 400rpx;
  z-index: 13;
  transform-origin: bottom center;
  animation: shake linear 0.5s infinite alternate;
}
.img-5 {
  width: 232rpx;
  height: 650rpx;
  position: absolute;
  right: 50rpx;
  top: 20rpx;
  z-index: 13;
}
.img-6 {
  width: 1254rpx;
  height: 1254rpx;
  position: absolute;
  left: -175rpx;
  top: -240rpx;
}
.content {
  // width: 100vw;
  // position: absolute;
  // bottom: 0;
  // left: 0;
  // display: flex;
  // flex-direction: column;
  // align-items: center;
  // justify-content: center;
  // padding-bottom: 86rpx;\
}
.text-box {
  position: absolute;
  left: 0;
  bottom: calc(20rpx + constant(safe-area-inset-bottom));
  bottom: calc(20rpx + env(safe-area-inset-bottom));
  width: 100%;
  text-align: center;
}
.shardo {
  width: 320rpx;
  height: 10rpx;
  background: rgba(4, 169, 254, 0.4);
  filter: blur(6.5px);
  margin: 10rpx auto 32rpx;
}
.text {
  color: #9497b1;
  font-size: 22rpx;
}
.btn {
  width: 452rpx;
  height: 114rpx;
  line-height: 114rpx;
  border-radius: 20rpx;
  background: linear-gradient(180deg, #00a7fe 0%, #2bbbfe 99%);
  color: #ffffff;
  font-size: 48rpx;
  font-weight: 900;
  margin: 0 auto;
}

.neonText {
  color: #fff;
  font-size: 40rpx;
  font-weight: bold;
  position: absolute;
  left: 306rpx;
  bottom: 140rpx;
  z-index: 14;
  text-shadow: 0 0 14rpx #fff, 0 0 20rpx #fff, 0 0 42rpx #fff, 0 0 84rpx #0fa,
    0 0 164rpx #0fa, 0 0 184rpx #0fa, 0 0 204rpx #0fa, 0 0 302rpx #0fa;
  animation: pulsate 1s infinite alternate;
}

@keyframes pulsate {
  100% {
    text-shadow: 0 0 8rpx #fff, 0 0 22rpx #fff, 0 0 38rpx #fff, 0 0 80rpx #0fa,
      0 0 160rpx #0fa, 0 0 180rpx #0fa, 0 0 200rpx #0fa, 0 0 300rpx #0fa;
  }
  0% {
    text-shadow: 0 0 4rpx #fff, 0 0 8rpx #fff, 0 0 12rpx #fff, 0 0 20rpx #0fa,
      0 0 90rpx #0fa, 0 0 110rpx #0fa, 0 0 140rpx #0fa, 0 0 160rpx #0fa;
  }
}

@keyframes jump {
  0% {
    transform: translateY(5rpx);
  }
  100% {
    transform: translateY(-5rpx);
  }
}

@keyframes scale {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  }
}

@keyframes shake {
  0% {
    transform: rotateZ(2deg);
  }
  100% {
    transform: rotateZ(-2deg);	
  }
}
